<html>
  <head>
    <title>JSON Server</title>
    <link href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/flatly/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="stylesheets/style.css">
  </head>
  <body>
    <div class="container">
      <p>
        <a href="https://github.com/typicode/json-server" class="logo">
          <img src="images/json.png">
        </a>
      </p>

      <hr>

      <p>
        <em>
          Congrats! You're successfully running JSON Server.
        </em>
      </p>

      <hr>

      <h4>Routes</h4>
      <p>
        Here are the resources that JSON Server has loaded:
      </p>
      <ul id="resources">loading, please wait...</ul>
      
      <p>
        You can view database current state at any time:
      </p>
      <ul>
        <li>
          <a href="db">db</a>
        </li>
      </ul>
      
      <p>
        You can use any HTTP verbs (GET, POST, PUT, PATCH and DELETE) and access your resources from anywhere
        using CORS and JSONP.
      </p>

      <h4>Documentation</h4>
      <p>
        View
        <a href="https://github.com/typicode/json-server">README</a>
        on GitHub.
      </p>

      <h4>Issues</h4>
      <p>Please go
        <a href="https://github.com/typicode/json-server/issues">here</a>.
      </p>

      <hr>

      <p>
        <i>To replace this page, create an index.html file in ./public, JSON Server will load it.</i>
      </p>
    </div>


    <script
      src="https://code.jquery.com/jquery-3.0.0.min.js"
      integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0="   crossorigin="anonymous"></script>
    <script>
      $(function() {
        $.get('db').then(function(data) {
          $('#resources').empty();
          $.each(data, function(key, value) {
            $('#resources')
              .append('<li><a href="'+ key + '">' + key + '</a></li>');
          })
        })
      })
    </script>
  </body>
</html>
